<template>
  <div class="my-piece">
    <SearchBar
      :searchParams="searchParams"
      @search="handleSearch"
      @reset="handleReset"
    />
    <div class="btn-group">
      <el-button type="primary" @click="addArticle"> 新建文章 </el-button>
    </div>
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="我的文章" name="article"></el-tab-pane>
      <el-tab-pane label="我的收藏" name="favorite"></el-tab-pane>
      <el-tab-pane label="我的点赞" name="like"></el-tab-pane>
    </el-tabs>
    <MyArticle v-if="activeTab === 'article'" :search-params="searchParams" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import MyArticle from './components/MyArticle.vue';
import SearchBar from './components/SearchBar.vue';

const router = useRouter();

const activeTab = ref<'article' | 'favorite' | 'like'>('article');
const searchParams = ref({
  name: '',
  dateRange: [],
  page: 1,
  size: 20
});

function addArticle() {
  router.push('/addArticle');
}

function handleTabChange(name: string | number) {
  activeTab.value = name as typeof activeTab.value;
}

function handleSearch(params: any) {
  // 可将 params 传递给下方表格组件
  searchParams.value = { ...params };
}

function handleReset() {
  searchParams.value = {
    name: '',
    dateRange: [],
    page: 1,
    size: 20
  };
}
</script>

<style scoped>
.my-piece {
  padding: 24px;
  background-color: #fff;
}
.filter-bar {
  margin-bottom: 16px;
}
.btn-group {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
